<template>
	<view class="content">
		<view class="form">
			<view class="item">
				<view class="label">
					<view class="starImg"></view>
					身份证正面照
				</view>
				<view class="iptImg" @tap="chooseAndUploadImage(1)">
					<image class="defaultImg" src="../../static/img/add.png" v-if="info.id_card_font_image == ''">
					</image>
					<image class="authenticationImg" :src="info.id_card_font_image" v-else></image>
				</view>
			</view>
			<view class="item">
				<view class="label">
					<view class="starImg"></view>
					身份证背面照
				</view>
				<view class="iptImg" @tap="chooseAndUploadImage(2)">
					<image class="defaultImg" src="../../static/img/add.png" v-if="info.id_card_behind_image == ''">
					</image>
					<image class="authenticationImg" :src="info.id_card_behind_image" v-else></image>
				</view>
			</view>
			<view class="item">
				<view class="label">
					<view class="starImg"></view>
					营业执照
				</view>
				<view class="iptImg" @tap="chooseAndUploadImage(3)">
					<image class="defaultImg" src="../../static/img/add.png" v-if="info.license_image == ''"></image>
					<image class="authenticationImg" :src="info.license_image" v-else></image>
				</view>
			</view>
			<view class="item">
				<view class="label">
					<image class="starImg" src="../../static/img/star.png" mode=""></image>
					合同签署页
				</view>
				<view class="iptImg" @tap="chooseAndUploadImage(4)">
					<image class="defaultImg" src="../../static/img/add.png" v-if="info.aggreement_image == ''"></image>
					<image class="authenticationImg" :src="info.aggreement_image" v-else></image>
				</view>
			</view>
			<view class="item">
				<view class="label">
					<view class="starImg"></view>
					公司门头/前台
				</view>
				<view class="iptImg" @tap="chooseAndUploadImage(5)">
					<image class="defaultImg" src="../../static/img/add.png" v-if="info.company_image == ''"></image>
					<image class="authenticationImg" :src="info.company_image" v-else></image>
				</view>
			</view>
			<view class="btn" @tap="addAuthentication()">
				确认提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					school_id: '',
					id_card_font_image: '',
					id_card_behind_image: '',
					license_image: '',
					aggreement_image: '',
					company_image: ''
				},
			};
		},
		onLoad(option) {
			this.info.school_id = option.school_id
			this.getData(option.school_id)
		},
		methods: {
			chooseAndUploadImage(info_name) {
				// 选择图片
				uni.chooseImage({
					count: 1, // 默认9，设置图片的数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (chooseImageRes) => {
						uni.showLoading();
						const tempFilePaths = chooseImageRes.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: 'https://haici.snooowball.cn/api/user/uploadImg', // 服务器上传接口地址
							filePath: tempFilePaths[0],
							header: {
								'token': uni.getStorageSync('app_token')
							},
							name: 'file', // 必须填写，后台用来接收文件
							formData: {
								file: tempFilePaths[0]
							},
							success: (uploadFileRes) => {
								var array = JSON.parse(uploadFileRes.data)
								if (info_name == 1) {
									this.info.id_card_font_image = array.data.url
								}
								if (info_name == 2) {
									this.info.id_card_behind_image = array.data.url
								}
								if (info_name == 3) {
									this.info.license_image = array.data.url
								}
								if (info_name == 4) {
									this.info.aggreement_image = array.data.url
								}
								if (info_name == 5) {
									this.info.company_image = array.data.url
								}
								uni.hideLoading();
							},
							fail: (uploadFileErr) => {
								uni.hideLoading();
								console.error('图片上传失败', uploadFileErr);
								return this.toast.msg('图片上传失败')
							}
						});
						// 监听上传进度变化
						uploadTask.onProgressUpdate((res) => {
							uni.hideLoading();
							console.log('上传进度' + res.progress + '%');
						});
					},
					fail: (chooseImageErr) => {
						console.error('选择图片失败', chooseImageErr);
						return this.toast.msg('选择图片失败')
					}
				});
			},
			async getData(school_id) {
				const {
					data: res
				} = await uni.$http.post('school/school/getSchoolAuthenticationData', {
					school_id: school_id
				})
				if (res.code != 1) {
					return this.toast.msg(res.msg)
				}
				this.info.id_card_font_image = res.data.id_card_font_image;
				this.info.id_card_behind_image = res.data.id_card_behind_image;
				this.info.license_image = res.data.license_image;
				this.info.aggreement_image = res.data.aggreement_image;
				this.info.company_image = res.data.company_image;
			},
			async addAuthentication() {
				const {
					data: res
				} = await uni.$http.post('school/school/AuthenticationSchool', this.info)
				if (res.code != 1) {
					return this.toast.msg(res.msg)
				}
				this.toast.msg('认证成功')
				setTimeout(() => {
					uni.navigateTo({
						url: '../school/index'
					})
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;

		.form {
			width: 100%;
			margin: 40rpx auto;
			padding-bottom: 100rpx;

			.item {
				padding: 0 5% 0 5%;
				margin-bottom: 30rpx;
				width: 100%;
				height: 220rpx;

				.label {
					font-size: 28rpx;
					margin-right: 40rpx;
					width: 220rpx;
					float: left;
					display: flex;
					align-items: flex-start;

					.starImg {
						width: 14rpx;
						height: 42rpx;
						margin-right: 15rpx;
					}
				}

				.iptImg {
					float: left;
					border-radius: 6px;
					border: 1px solid #ECECEC;
					position: relative;
					width: 206.78rpx;
					height: 206.78rpx;
					border: 1.75rpx solid #ECECEC;

					.defaultImg {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 28rpx;
						height: 28rpx;
					}

					.authenticationImg {
						position: absolute;
						width: 100%;
						height: 100%;
						border-radius: 6px;
					}
				}
			}
		}
		.btn {
			position: fixed;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 652rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			background: #CCCCCC;
			border: 2rpx solid #69A1E0;
		}
	}
</style>